<template>
  <content-page>
    <a-card title="条件搜索" size="small" :bordered="false">
      <div slot="extra">
        <a-button type="primary" size="small" icon="search" @click="handleSearch">查询</a-button>
        <a-divider type="vertical" />
        <a-button size="small" icon="reload" @click="handleReset">刷新</a-button>
      </div>
      <!-- 搜素表单 -->
      <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <a-row>
          <a-col :span="8">
            <a-form-item label="姓名">
              <a-input/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="身份证">
              <a-input/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="出生年月">
              <a-input/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item label="常驻地址">
              <a-input/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="学历">
              <a-input/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="时间段">
              <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-date-picker style="width: 100%" />
              </a-form-item>
              <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
                -
              </span>
              <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                <a-date-picker style="width: 100%" />
              </a-form-item>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card title="人员信息" size="small" :bordered="false">
      <div slot="extra">
        <a-button type="primary" size="small" icon="plus" @click="$refs.model.toAdd()">
          添加人员
        </a-button>
      </div>
    </a-card>
    <template v-slot:footer>
      <a-table
        :columns="columns"
        :data-source="data"
        :scroll="{ y: 1 }"
        rowKey="id"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange">
        <template slot="action" slot-scope="text, record">
          <a-button type="primary" size="small" icon="edit" @click="$refs.model.toEdit(record)">
            编辑
          </a-button>
          <a-divider type="vertical"/>
          <a-button type="danger" size="small" icon="delete">
            删除
          </a-button>
        </template>
      </a-table>
    </template>
    <people ref="model" @ok="handleModelOk"></people>
  </content-page>
</template>

<script>
import { apiGetGridData } from '@/api/demo/grid'
import People from './People'

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: '100px',
    ellipsis: true
  },
  {
    title: '身份证',
    dataIndex: 'idCard',
    width: '200px',
    ellipsis: true
  },
  {
    title: '出生年月',
    dataIndex: 'date',
    width: '120px',
    ellipsis: true
  },
  {
    title: '常驻地址',
    dataIndex: 'address',
    ellipsis: true
  },
  {
    title: '学历',
    dataIndex: 'education',
    ellipsis: true,
    width: '120px'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: {
      customRender: 'action'
    },
    width: '190px'
  }
]

export default {
  name: 'Grid',
  components: { People },
  data () {
    return {
      expand: false,
      form: this.$form.createForm(this, { name: 'search' }),
      columns,
      data: [],
      pagination: {},
      loading: false
    }
  },
  mounted () {
    this.getGaidData()
  },
  computed: {
    count () {
      return this.expand ? 11 : 7
    }
  },
  methods: {
    handleTableChange (pagination, filters, sorter) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.getGaidData({
        pageSize: pagination.pageSize,
        currentPage: pagination.current
      })
    },
    // 获取表格数据
    getGaidData (param = {}) {
      this.loading = true
      apiGetGridData(param).then(response => {
        const reuslt = response.result
        const pagination = { ...this.pagination }
        pagination.total = reuslt.totalCount
        this.loading = false
        this.data = reuslt.data
        this.pagination = pagination
      })
    },
    // 搜索
    handleSearch () {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values)
        }
      })
    },
    // 重置
    handleReset () {
      this.form.resetFields()
    },
    // 人员处理成功
    handleModelOk () {
      this.$message.success('保存成功')
    }
  }
}
</script>

<style scoped>
</style>
